<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader/>
      <TodoList></TodoList>
      <TodoFoot/>
    </div>
  </div>
</template>

<script>
  import TodoHeader from "./components/TodoHeader";
  import TodoList from "./components/TodoList";
  import TodoFoot from "./components/TodoFoot";

  export default {
    name: "App",
    components: {TodoHeader, TodoList, TodoFoot},
    mounted() {
      // 异步请求数据
      this.$store.dispatch('reqtodos')
    }

  }
</script>

<style scoped>
  /*app*/
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }

  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

</style>
